<template>
  <div>
    <el-button type="primary" :icon="Plus" @click="addSpuAttr" :disabled="!categoryStore.category3Id">添加SPU</el-button>
    <el-table :data="spuList" border style="width: 100%" v-loading="loading">
      <el-table-column align="center" label="序号" width="80" type="index"/>
      <el-table-column prop="spuName" align="center" label="SPU名称" width="180" />
      <el-table-column prop="description" label="SPU描述" width="180" />
      <el-table-column prop="address" label="操作">
        <template v-slot="{row}">
           <el-tooltip
            class="box-item"
            effect="dark"
            content="确认增加SKU吗"
            placement="top"
          >
            <el-button :icon="Plus" type="primary" size="small" @click="toAddSku(row)"></el-button>
          </el-tooltip>
           <el-tooltip
            class="box-item"
            effect="dark"
            content="确认编辑吗"
            placement="top"
          >
             <el-button :icon="Edit" type="primary" size="small" @click="toEditSpu(row)"></el-button>
          </el-tooltip>
           <el-tooltip
            class="box-item"
            effect="dark"
            content="查看SKU列表"
            placement="top"
          >
            <el-button :icon="InfoFilled" type="info" size="small" @click="toCheackSku(row)"></el-button>
          </el-tooltip>
           <el-popconfirm  confirm-button-text="Yes"
              cancel-button-text="No"
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="确认删除吗"
              @confirm="confirmEvent(row.id)"
              @cancel="cancelEvent">
            <template #reference>
              <el-button :icon="Delete" type="danger" size="small"></el-button>
            </template>
          </el-popconfirm>
        </template> 
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[3, 6, 9, 12]"
      layout="prev, pager, next, jumper,->, sizes,total"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 对话框 -->

     <el-dialog
        v-model="skudialogVisible"
        title="=>SKU列表"
        width="30%"
        :before-close="handleClose"
      >
        <el-table :data="skuList" style="width: 100%">
          <el-table-column prop="skuName" label="名称" />
          <el-table-column prop="price" label="价格(元)" />
          <el-table-column prop="weight" label="重量(KG)" />
          <el-table-column  label="默认图片">
            <template v-slot="{row}">
              <el-image :src="row.skuDefaultImg"> </el-image>
            </template>
          </el-table-column>
        </el-table>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="skudialogVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogVisible = false">
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>

  </div>
</template>

<script lang="ts">
  export default {
    name:'SpuList'
  }
</script>

<script lang="ts" setup>
import {Plus,Edit,Delete,InfoFilled} from '@element-plus/icons-vue'
import {ref,watch} from 'vue'
import {reqGetSpuListData,reqGetBaseSaleAttrListData,reqGetSpuAttrData, DeleteSpuData} from '@/api/product/spu'
import {useCategoryListStore} from '@/stores/categoryList'
import {typeSpu} from '../type'
import { ElMessage,ElMessageBox  } from 'element-plus'
import { reqGetSkuListData } from '@/api/product/sku'
const categoryStore = useCategoryListStore()
// loading效果
const loading = ref(false)
//分页
const pageSize = ref<number>(5)
const currentPage = ref<number>(1)
const total = ref<number>(10)
const spuList = ref([])  // 定义数据存变量spu列表数据
const skuList = ref([])
// 父组件传递的参数
const emit = defineEmits(['setshowSpu','getspuInfo'])

// sku对话框
const skudialogVisible = ref(false)
// 1.点击增加SPU
const addSpuAttr = ()=>{
  emit('setshowSpu',typeSpu.SPU_FORM)
  // 点击添加的时候清空表单
  emit('getspuInfo',{})
}
//2.请求查询列表数据
const getQuerySpuList = async ()=>{
  // 需要同时发送两个请求，用到promise.all
  const result = await reqGetSpuListData(currentPage.value,pageSize.value,categoryStore.category3Id as number)
  // console.log('rr',result);
  spuList.value = result.records;
  total.value = result.total;
  loading.value = false
}
//3.监听三级导航的数据变化
watch(
  ()=>categoryStore.category3Id,
  category3Id=>{
    if(!category3Id){
      spuList.value = []  //赋值为空
      return
    }
    loading.value = true
    getQuerySpuList()
  },
  {immediate:true}
)

//4.改变条数
const handleSizeChange = (val: number) => {
  console.log('pagesize',val)
  pageSize.value = val
  currentPage.value = 1
  getQuerySpuList()
}
//5. 改变当前页码
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage.value = val
  getQuerySpuList()
}
//6.删除spu
const confirmEvent = async (id:number)=>{
  await DeleteSpuData(id)
  // 重新刷新页面
  getQuerySpuList()
}

//7.取消删除
const cancelEvent = ()=>{
  ElMessage('取消删除数据成功')
}

// 8.修改数据之回显数据spu
const toEditSpu = (row)=>{
  // 将数据传递给父组件
  emit('getspuInfo',row)
  // 将页面返回到spuList页面
  emit('setshowSpu',typeSpu.SPU_FORM)
}

// 9.添加sku
const toAddSku =(row)=>{
  emit('setshowSpu',typeSpu.SKU_FORM)
  emit('getspuInfo',row)
}

// 10.查看sku数据列表
const toCheackSku =async (row)=>{
  const result = await reqGetSkuListData(row.id)
  skuList.value = result
  console.log(skuList);
  skudialogVisible.value = true
}
// 关闭对话框
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
     skudialogVisible.value = false
    })
    .catch(() => {
      // catch error
    })
}
</script>

<style>
.tooltip-base-box {
  width: 600px;
}
.tooltip-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tooltip-base-box .center {
  justify-content: center;
}
.tooltip-base-box .box-item {
  width: 110px;
  margin-top: 10px;
}
</style>